<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String username = "";
	String userpwd = "";
	String checked = "";

	//读取cookies
	Cookie[] cookies = request.getCookies();
	if (cookies != null) {
		for (Cookie c : cookies) {
			//判断key
			if (c.getName().equals("username")) {
				username = c.getValue();
			} else if (c.getName().equals("userpwd")) {
				userpwd = c.getValue();
			} else if (c.getName().equals("checked")) {
				checked = c.getValue();
			}
		}
	}
	//把参数储存在作用域中
	pageContext.setAttribute("username", username);
	pageContext.setAttribute("userpwd", userpwd);
	pageContext.setAttribute("checked", checked);
%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Glassy Login Form A Responsive Widget Template :: w3layouts</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Glassy Login Form Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/front/frontLogin/css/font-awesome.css"> <!-- Font-Awesome-Icons-CSS -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/front/frontLogin/css/style.css" type="text/css" media="all" /> <!-- Style-CSS --> 
<!-- //css files -->
<!-- web-fonts -->
<link href="//fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700" rel="stylesheet">
<!-- //web-fonts -->
</head>
<body>
		<!--header-->
		<div class="header-w3l">
			<h1>城市公交信息查询</h1>
		</div>
		<!--//header-->
		<!--main-->
		<div class="main-w3layouts-agileinfo">
	           <!--form-stars-here-->
						<div class="wthree-form">
							<h2>欢迎登陆</h2>
							<form  id="entry_form" action="${pageContext.request.contextPath }/UserController?op=frontLogin" method="post">
								<div class="form-sub-w3">
									<input type="text" name="Username" id="Username" placeholder="用户名 " required="" />
								<div class="icon-w3">
									<i class="fa fa-user" aria-hidden="true"></i>
								</div>
								</div>
								<div class="form-sub-w3" id="userNameId">
									
								</div>
								<div class="form-sub-w3">
									<input type="password" name="Password" id="Password" placeholder="密码" required="" />
								<div class="icon-w3">
									<i class="fa fa-unlock-alt" aria-hidden="true"></i>
								</div>
								</div>
								<div class="form-sub-w3" id="userPwdId">
									
								</div>
								<div class="form-sub-w3">
								<input type="text" id="ucheck" name="ucheck" placeholder="验证码 " required="" />
								<div class="icon-w3" style="width:100px"> 
									<img style="vertical-align: middle;height: 50px; " id="checkCode" src="${pageContext.request.contextPath }/UserController?op=createCode">
								</div>
								</div>
								<div class="form-sub-w3" id="ucheckId">
									 
								</div>
								<div id="remember">
									<label class="anim">
									<c:if test="${checked eq 'checked' }">
										<input type="checkbox" class="checkbox" checked>
									</c:if>
									<c:if test="${checked != 'checked' }">
										<input type="checkbox" class="checkbox">
									</c:if>
										<span>记住密码</span> 
										<a href="#">忘记密码</a>
									</label> 
								</div>
								<div class="clear"></div>
								<div class="submit-agileits">
									<input type="submit" value="登陆">
									<input id="register" type="button" value="注册">
								</div>
							</form>

						</div>
				<!--//form-ends-here-->

		</div>
		<!--//main-->
		<!--footer-->
		<div class="footer">
			<p>&copy; 2020 欢迎使用 隐私政策<a href="#">西安etc</a></p>
		</div>
		<!--//footer-->
		<script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {
				//判断用户名是否为空
				$("#Username").blur(function() {
					if ($("#Username").val().trim() != "") {
						$("#userNameId").html("")
					} else {
						$("#userNameId").html("<font color='red'>用户名不能为空</font>")
					}
				});
				//判断密码是否为空
				$("#Password").blur(function() {
					if ($("#Password").val().trim() != "") {
						$("#userPwdId").html("")
					} else {
						$("#userPwdId").html("<font color='red'>密码不能为空</font>")
					}
				});
				//验证码
		  		 $("#ucheck").blur(function(){
		 			 //判断验证码是否为空
		   		   if( $("#ucheck").val().trim()==""){
		   			  $("#ucheckId").html("<font color='red'>验证码不能为空</font>");
		   		   }else{
		   			   $.post("${pageContext.request.contextPath }/UserController",{checkNum: $("#ucheck").val(),op:"checkCode"},function(data){
		   				   //把返回来的数据显示在提示标签上
		   				   $("#ucheckId").html(data);   				   
		   			   })	    			   
		   		   }  
		 		 }); 
				 $("#entry_form").submit(function(){
					 if($("#userPwdId").text("") && $("#userNameId").text("") && $("#ucheckId").html("<font color='green'>验证通过</font>")){
						 return true;
					 }
					 return false;
				 })
				 //跳转注册页面
		  		 $("#register").click(function(){
		  			location.href='register.jsp';
		  		 })
			})
			/*
			验证码分析：
			点击超链接或者图片，需要换一张
			1.给超链接和图片取绑定点击事件
			2.重新设置图片的src值
			*/
			window.onload=function(){
				//获取图片对象
				var img=document.getElementById("checkCode");
				//绑定单击事件
				img.onclick=function(){
					//加时间戳
					var date=new Date().getTime();
					img.src="${pageContext.request.contextPath }/UserController?op=createCode&?"+date;  //时间戳永不重复
				}
			}
		</script>
</body>
</html>